import { DocumentCard, DocumentCardType, DocumentCardPreview, DocumentCardDetails, IStyleFunctionOrObject, DefaultButton, IDocumentCardPreviewProps, IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles, Stack, IStackProps, IStackStyles, IButtonStyles, useTheme } from "@fluentui/react";
import React from "react";
import { Link } from "react-router-dom";
import Alymodel from "../../mysql_interface/model";
import { Iroot } from "../interface";

interface Idata extends Alymodel.IMcatebag {
    list: Alymodel.IMcourse[]
    title?: string
    length: number
}

interface P extends Iroot {
    data: Idata,

}

const previewPropsUsingIcon: IDocumentCardPreviewProps = {
    previewImages: [
        {
            width: 144,
        },
    ],
};

const styles: IStyleFunctionOrObject<IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles> = {
    root: {
        minWidth: 240,
        minHeight: '100%'
    }
}

const h1styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        fontSize: '14px',
        color: '#434343',
        fontWeight: 'bold',
    }
}


const stylesbutton: IButtonStyles = {
    root: {
        backgroundColor: 'var(--color-dark)',
        color: '#fff',
        borderColor: 'var(--color-dark)'
    },
    rootHovered: {
        backgroundColor: 'var(--color-cheng)',
        color: '#fff',
        borderColor: 'var(--color-cheng)'
    }
}

const CardList: React.FunctionComponent<P> = (p) => {
    const theme = useTheme()
    return (
        <DocumentCard
            theme={theme}
            type={DocumentCardType.compact}
            style={{
                height: '100%',
                maxWidth: '100%',
                boxShadow: theme.effects.elevation4,
                overflow: 'hidden',
                borderRadius: 2,
                borderWidth: 0
            }}
        >
            <DocumentCardPreview styles={styles} previewImages={[{ height: 158, imageFit: 2, width: 240, previewImageSrc: p.data.banner ? p.data.banner : '' }]} />
            <DocumentCardDetails className="p-12">
                <Stack  >
                    <Stack className="mb-12" styles={h1styles} >
                        {p.data.title}
                    </Stack >
                    <Stack style={{ height: 68, color: '#8C8C8C' }} >
                        <span style={{ height: 24 }} >课程数量：{p.data.length}课时</span>
                        <span className="text-truncate" style={{ height: 36, overflow: 'hidden', fontSize: '12px' }} >{p.data.info}</span>
                    </Stack>

                    <Stack horizontalAlign="end">
                        <Link to={"/catebag/" + p.data.ID} >
                            <DefaultButton className="transition" styles={stylesbutton} >立即观看</DefaultButton>
                        </Link>
                    </Stack>
                </Stack>
            </DocumentCardDetails>
        </DocumentCard>
    )
}

export default CardList